<!--
 * @Autor: 王琛
 * @Description: 选房承载页面
 * @Copyright: 版权归个人所有
-->
<style lang="stylus" scoped>
#HouseSelection {
  width: 100%;
  height: 100%;
  position: relative;

  .LongitudinalSwiper, .LongitudinalSwiper_TopBottom, .LongitudinalSwiper_LeftRight {
    width: 100%;
    height: 100%;
    overflow: hidden;

     .LongitudinalSwiper_LeftRight_img {
           width: 100%;
           height: 100%;
         }
  }

  .BuildingNumberAndLayoutMenu {
    width: 90%;
    height: 70px;
    position: fixed;
    bottom: calc(var(--BottomMenuAllHeight) + 5px);
    left: 50%;
    transform: translate(-50%, 0%);
    display: grid;
    grid-template-rows:repeat(2, 1fr);
    grid-template-columns: 100%;
    align-items: center
    justify-items: center;



    .BuildingNumber, .HouseLayoutMenu {
      width: 100%;
      height: 90%;
      background: rgba(48, 48, 48, 0.6);
      border-radius: 15px;
      display: grid;
      grid-template-rows:100%;
      grid-template-columns: 100%;
      align-items: center;
      justify-items: center;
      padding: 0px 10px;
      box-sizing: border-box;



      .BuildingNumberText, .HouseLayoutText {
        height: 100%;
        font-size: 12px;
        color: #ffffff;
        transition: color .2s;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      & > *.Activation {
        color: var(--ActivationColor);
      }
    }

    .HouseLayoutMenu {
      width: auto;
      display: flex;
      justify-content: center;
      align-items: center;
      min-width: 60px;

      .HouseLayoutText {
        padding: 5px;
        box-sizing: border-box;
      }
    }
  }
}
</style>


<template>
  <div id="HouseSelection" :style="{ 'background': `url('${ _data.PageConfig?.PageImgRoot || ``}${ _data.PageConfig?.MainBg || ``}') no-repeat top center / 100% auto` }">
    <!-- 上下轮播图切换 -->
    <div class="LongitudinalSwiper">
      <van-swipe class="LongitudinalSwiper_TopBottom" :autoplay="500000" vertical :show-indicators="false">
        <!-- 上部分户型简介展示 -->
        <van-swipe-item>
          <!-- 左右轮播 -->
          <van-swipe class="LongitudinalSwiper_LeftRight" ref="LongitudinalSwiper_LeftRight_Top" :duration="500" :autoplay="500000" :show-indicators="false" @change="RotatingSynchronization">
            <van-swipe-item v-for="(item,index) in _data.HouseTypes">
              <img class="LongitudinalSwiper_LeftRight_img" :src="`${ _data.PageConfig?.PageImgRoot}${item.TopImage}`" alt="" srcset="">
            </van-swipe-item>
          </van-swipe>
        </van-swipe-item>
        <!-- 下部分详情展示 -->
        <!--<van-swipe-item>-->
        <!--  &lt;!&ndash; 左右轮播 &ndash;&gt;-->
        <!--  <van-swipe class="LongitudinalSwiper_LeftRight" ref="LongitudinalSwiper_LeftRight_Bottom" :autoplay="500000" :show-indicators="false" @change="RotatingSynchronization">-->
        <!--    <van-swipe-item v-for="(item,index) in _data.HouseTypes">-->
        <!--      <img class="LongitudinalSwiper_LeftRight_img" :src="`${ _data.PageConfig?.PageImgRoot}${item.BottomImage}`" alt="" srcset="">-->
        <!--    </van-swipe-item>-->
        <!--  </van-swipe>-->
        <!--</van-swipe-item>-->
      </van-swipe>
    </div>

    <!-- 菜单栏 -->
    <div class="BuildingNumberAndLayoutMenu">
      <!-- 楼号菜单 -->
      <div class="BuildingNumber" :style="{'gridTemplateColumns':`repeat(${_data.PageConfig['MenuList']?.length},1fr)`}">
        <p v-for="(item,index) in _data.PageConfig['MenuList']" :key="index" :class="{BuildingNumberText:true,Activation:_data.CurSelectHouseType.ParentBuildingNumber === item.BuildingNumber}" @click="ClickFloor(item)">{{ item.Name }}</p>
      </div>
      <!-- 户型菜单 -->
      <div class="HouseLayoutMenu" :style="{'gridTemplateColumns':`repeat(${_data.HouseTypes.length},1fr)`}">
        <template v-for="(item,index) in _data.HouseTypes" :key="index">
          <div v-show="_data.CurSelectHouseType.ParentBuildingNumber === item.ParentBuildingNumber" :class="{HouseLayoutText:true,Activation:_data.CurSelectHouseType?.HouseType === item?.HouseType}" @click=" ClickHouseType(item)">{{ item.Name }}</div>
        </template>
      </div>
    </div>
  </div>
</template>


<script setup lang="ts" name="HouseSelection">

import {useMainStore} from "src/pinia";
import {onMounted, reactive, ref} from "vue";
import {useRoute} from "vue-router"

const _state = useMainStore();
const _route = useRoute();

// 上部分轮播图
const LongitudinalSwiper_LeftRight_Top = ref(null);
// 下部分轮播图
const LongitudinalSwiper_LeftRight_Bottom = ref(null);


const _data = reactive({
  // 页面配置
  PageConfig: {},
  // 户型列表
  HouseTypes: [],
  // 当前选中的户型
  CurSelectHouseType: {}

})

onMounted(() => {
  InitPageData();
})

/**
 * @description: 初始化楼层数据
 * @author: 王琛
 * @Date: 2025-04-26 00:13:45
 * @param {*}
 * @return {*}
 */
function InitPageData() {
  try {
    const PageConfigKey = _route.query?.PageConfigKey || false;

    if (!PageConfigKey) throw new Error('没有传入页面配置参数');

    const PageConfig = _state.pageDataConfig?.PageConfig[PageConfigKey] || false;

    if (!PageConfig) throw new Error('没有找到页面配置参数');

    _data.PageConfig = PageConfig;

    // 整理楼号信息
    let ListOfHouseTypes = [];

    _data.PageConfig['MenuList'].forEach(e => {

      e.HouseTypes.ListOfHouseTypes.forEach((item, index) => {

        ListOfHouseTypes.push(Object.assign(item, {ParentBuildingNumber: e.BuildingNumber, index: ListOfHouseTypes.length}));

      })
    })

    _data.HouseTypes = ListOfHouseTypes;

    // 设置默认选中第一个楼号
    ClickHouseType(_data.HouseTypes[0]);


  } catch (e) {
    console.error('%c捕获报错-00:13:45', 'color:#fff;fontSize:15px;background:#993366;padding:2px 5px;border-radius:6px', e.message);
  }
}

/**
 * @description: 点击了楼号
 * @author: 王琛
 * @Date: 2025-04-26 15:18:26
 * @param {*}
 * @return {*}
 */
function ClickFloor(Config) {
  try {
    console.log('%c日志-151903', 'color:#fff;fontSize:15px;background:#993366;padding:2px 5px;border-radius:6px', Config);
    // 获取当前楼号下面的第一个户型
    const CurHouseTypeOne = Config.HouseTypes.ListOfHouseTypes[0];

    //if (CurHouseTypeOne.Name === _data.CurSelectHouseType.Name) throw new Error('当前户型已经选中');

    ClickHouseType(CurHouseTypeOne);

  } catch (e) {
    console.error('%c捕获报错-15:18:26', 'color:#fff;fontSize:15px;background:#993366;padding:2px 5px;border-radius:6px', e.message);
  }

}


/**
 * @description: 点击了户型
 * @author: 王琛
 * @Date: 2025-04-26 15:34:21
 * @param {*}
 * @return {*}
 */
function ClickHouseType(Config) {
  try {
    _data.CurSelectHouseType = Config;

    RotatingSynchronization(Config.index)

  } catch (e) {
    console.error('%c捕获报错-15:34:21', 'color:#fff;fontSize:15px;background:#993366;padding:2px 5px;border-radius:6px', e.message);
  }
}

/**
 * @description: 轮播图同步函数同时同步楼层和菜单数据
 * @author: 王琛
 * @Date: 2025-04-26 15:40:21
 * @param {*}
 * @return {*}
 */
function RotatingSynchronization(index) {
  try {
    // 上下轮播同步
    LongitudinalSwiper_LeftRight_Top.value.swipeTo(index,{immediate:false});
    //LongitudinalSwiper_LeftRight_Bottom.value.swipeTo(index,{immediate:false});

    // 获取当前选中楼号
    const CurIndexHouseType = _data.HouseTypes[index];

    // 判断当前选中楼号是否和当前选中户型一致
    if (_data.CurSelectHouseType.HouseType === CurIndexHouseType.HouseTypes) throw new Error('当前选中户型和当前选中楼号一致');

    // 设置当前选中楼号
    _data.CurSelectHouseType = CurIndexHouseType;

  } catch (e) {
    console.error('%c捕获报错-15:34:21', 'color:#fff;fontSize:15px;background:#993366;padding:2px 5px;border-radius:6px', e.message);
  }

}
</script>